<!--
 * @Description: 报名组件
 * @Version: 2.0
 * @Autor: Seven
 * @Date: 2020-12-03 15:15:07
 * @LastEditors: Seven
 * @LastEditTime: 2020-12-22 15:52:26
-->
<template>
    <el-dialog
        custom-class="signUp"
        :visible="visible"
        @update:visible="update"
    >
        <div class="signUp-wrap">
            <div class="item">
                <div class="j-title">选择课程</div>
                <div class="j-body">
                    <div class="el-input__inner">
                        {{ course.title }}
                    </div>
                    <div class="address">
                        上课地址：{{ course.classAddress }}
                    </div>
                </div>
            </div>

            <div class="item">
                <div class="j-title">联系方式</div>
                <div class="j-body">
                    <el-form
                        class="input-wrap"
                        :model="ruleForm"
                        :rules="rules"
                        ref="ruleForm"
                    >
                        <el-form-item class="input-box" prop="name">
                            <el-input v-model="ruleForm.name" clearable>
                            </el-input>
                            <span class="label">联系人：</span>
                        </el-form-item>

                        <el-form-item class="input-box" prop="phone">
                            <el-input v-model="ruleForm.phone">
                            </el-input>
                            <span class="label">手机号：</span>
                        </el-form-item>
                    </el-form>
                </div>
            </div>

            <div class="btn-warp">
                <button class="btn" @click="submit('ruleForm')">立即报名</button>
            </div>
        </div>
    </el-dialog>
</template>
<script>
import { createOrder } from "~/api";
export default {
    props: {
        // 显示隐藏
        visible: {
            type: Boolean,
            default: false,
        },
        // 课程信息
        course: {
            type: Object,
            default: () => {
                return {
                    name: "",
                    address: "",
                };
            },
        },
    },
    data() {
        return {
            ruleForm: {
                // 联系人
                name: "",
                // 联系方式
                phone: "",
            },
            rules: {
                name: [
                    {
                        required: true,
                        message: "请输入联系人",
                    },
                ],
                phone: [
                    {
                        required: true,
                        message: "请输入手机号",
                        trigger: "blur",
                    },
                    {
                        min: 11,
                        message: "手机号最小11位",
                    },
                ],
            },
        };
    },
    methods: {
        // 显示隐藏
        update(val) {
            this.$emit("update:visible", val);
        },
        // 提交
        submit(formName) {
            // this.$emit("update:visible", false);
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // 验证通过,拉起订单
                    createOrder(this.ruleForm.phone, this.ruleForm.name, this.course.id).then(res=>{
                        if(res.data.code === 0){
                            // 拉起订单成功，跳转到支付页面
                            this.$router.push('/payment/'+ res.data.data)
                        }else{
                            this.$message.error(res.data.msg);
                        }
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
            
        },
    },
};
</script>
<style lang="scss">
.el-dialog {
    border-radius: 10px;
}
.signUp {
    width: 760px;
    .signUp-wrap {
        .el-input__inner {
            width: 260px;
            height: 48px;
            line-height: 48px;
        }
        .input-box {
            .el-input__inner {
                padding-left: 60px;
            }
        }
    }
}

@media screen and (max-width: 760px) {
    .signUp {
        width: calc(100% - 20px);
        .signUp-wrap {
            .el-input__inner {
                width: 100%;
                height: 48px;
                line-height: 48px;
            }
            .input-box {
                .el-input__inner {
                    padding-left: 60px;
                }
            }
        }
    }
}
</style>
<style lang="scss" scoped>
.signUp-wrap {
    text-align: left;
    .item {
        & + .item {
            margin-top: 30px;
        }
        .j-title {
            font-size: 24px;
            font-weight: bold;
            color: #333333;
            position: relative;
            padding-left: 10px;
            &::before {
                content: "";
                position: absolute;
                top: 1px;
                left: 0;
                z-index: 10;
                width: 4px;
                height: 22px;
                background-color: #12bd96;
            }
        }
        .j-body {
            margin-top: 20px;

            .address {
                font-size: 14px;
                color: #999999;
                margin-top: 10px;
            }
            .input-wrap {
                display: flex;
                justify-content: space-between;
                .input-box {
                    position: relative;
                    .label {
                        position: absolute;
                        left: 10px;
                        top: 16px;
                        z-index: 10;
                        font-size: 14px;
                        color: #999;
                        line-height: 1;
                    }
                }
            }
        }
    }
    .btn-warp {
        margin-top: 30px;
        .btn {
            min-width: 416px;
            font-size: 28px;
            height: 60px;
            line-height: 60px;
            margin: 0 auto;
        }
    }
}
@media screen and (max-width: 760px) {
    .signUp-wrap .item .j-body .input-wrap {
        flex-direction: column;
    }
    .signUp-wrap .btn-warp .btn {
        min-width: 200px;
        font-size: 16px;
        height: 40px;
        line-height: 40px;
    }
    .signUp-wrap .item .j-body .input-wrap .input-box + .input-box {
        margin-top: 20px;
    }
}
</style>